<template>
	<view class="round" :style="{'height':width +'upx','width':width + 'upx'}">
		<view class="round-bg-right" :style="{'background-color':progressDefaultColor}">
			
		</view>
		<view class="round-right" :style="{'height':(topPercent>100?100:topPercent)+'%','background-color':progressActiveColor}">
			
		</view>
		<view class="round-bg-left" :style="{'height':(topPercent<100? 100: 200 - topPercent) + '%','background-color':progressDefaultColor }">
			
		</view>
		<view class="round-left" :style="{'background-color':progressActiveColor}">
			
		</view>
		<view class="round-in" @touchstart="start" @touchend="suspend" :style="{'background-color':bgColor,
		'border-color': borderColor=='none'? progressDefaultColor:borderColor,'width':(width - progressWidth*2)+'upx',
		'height':(width - progressWidth*2)+'upx'}">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	var _self;
	export default {
		data() {
			return {
				id:'',
				topPercent:0,
				done:false
			}
		},
		computed: {
			name() {
				return this.data 
			}
		},
		props: {
			progressDefaultColor: {
				type: String,
				default: '#969696'
			},
			progressActiveColor: {
				type: String,
				default: '#BBBBBB'
			},
			bgColor:{
				type:String,
				default:'#FFFFFF'
			},
			borderColor:{
				type:String,
				default:'none'
			},
			width:{
				type:Number,
				default:200
			},
			progressWidth:{
				type:Number,
				default:15
			},
			duration:{
				type:Number,
				default:15
			}
		},
		methods:{
			start(){
				if(this.id || this.done){
					return
				}
				_self=this;
				this.id=setInterval(function(){
					_self.topPercent++
					if(_self.topPercent==200){
						_self.done=true
						_self.restore()
						_self.complete()
					}
				},_self.duration)
			},
			suspend(){
				if(!this.done){
					this.topPercent=0
					this.restore()
				}else{
					
				}
			},
			complete(){
				this.$emit('complete',null)
			},
			restore(){
				clearInterval(this.id)
				this.id=null
			},
			clear(){
				this.topPercent=0
				this.done=false
			},
		}
	}
</script>

<style scoped>
.round{
	border-radius: 100%;
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.round-right{
	position: absolute;
	right: 0;
	bottom: 0;
	top: 0;
	width: 50%;
	z-index: 11;
}
.round-bg-right{
	position: absolute;
	right: 0;
	bottom: 0;
	top: 0;
	width: 50%;
	z-index: 10;
}
.round-left{
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 50%;
	z-index: 10;
}
.round-bg-left{
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 50%;
	z-index: 11;
}
.round-in{
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	border: 1upx solid;
	border-radius: 100%;
	z-index: 12;
}
</style>
